<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="handleRemindUpdate">
                <template #title>
                    关键词发布注意事项
                </template>
                <template #content>
                    请用户严格遵守法律法规，不得发布任何违法、违规、低俗、过激、虚假及违反社会公序良俗等信息！<br>

                    请仔细阅读并遵守：<el-link href="https://www.baidu.com/" type="primary">信息安全规范承诺函、禁用语及敏感词规则。</el-link><br>

                    开始使用本产品/服务即代表用户（购买或使用方）完全知情并同意遵守信息安全规范承诺及相应的规则规章，如有违反所造成的的一切后果及责任由用户完全承担。<br>
                </template>
            </Remind>
        </div>
        <div class="pt-26px pl-26px pr-26px words-container">
            <el-row :gutter="26">
                <el-col :span="8">
                    <div class="words-item">
                        <div class="flex items-center words-item__title font-bold text-14px">前辍/地区词（{{prefixWords}}/{{formData.prefixWords.length}}个） <span>最少填8个</span></div>
                        <div class="words-item__list">
                            <el-scrollbar>
                                <ul>
                                <li></li>
                            </ul>
                            <div class="words-item__form">
                                <el-input v-for="(o,i) in formData.prefixWords" :id="'prefixWordsList'+i" :key="i" :placeholder="o.placeholder" v-model="o.keyword" :readonly="o.canDel==0" v-on:change="kwInputChange" @keydown="toNextPrefixWordsList($event,i)" maxlength="20" show-word-limit></el-input>
                            </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="words-item">
                        <div class="flex items-center justify-between words-item__title font-bold text-14px">
                            <div>
                                主词（{{mainWords}}/{{formData.mainWords.length}}个） <span>最少填10个</span>
                            </div>
                            <div>
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="addMainWords"
                                >
                                    自定义词/0个
                                </el-button>
                            </div>
                        </div>
                        <div class="words-item__list">
                            <el-scrollbar>
                                <ul>
                                <li></li>
                            </ul>
                            <div class="words-item__form">
                                <el-input v-for="(o,i) in formData.mainWords" :id="'mainWordsList'+i" :key="i" :placeholder="o.placeholder" v-model="o.keyword" :readonly="o.canDel==0" v-on:change="kwInputChange" @keydown="toNextMainWordsList($event,i)" maxlength="20" show-word-limit></el-input>
                            </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                <div class="words-item">
                        <div class="flex items-center words-item__title font-bold text-14px">后缀词（{{suffixWords}}/{{formData.suffixWords.length}}个） <span>最少填5个</span></div>
                        <div class="words-item__list">
                            <el-scrollbar>
                                <ul>
                                    <li></li>
                                </ul>
                            <div class="words-item__form">
                                <el-input v-for="(o,i) in formData.suffixWords" :id="'suffixWordsList'+i" :key="i" :placeholder="o.placeholder" v-model="o.keyword" :readonly="o.canDel==0" v-on:change="kwInputChange" @keydown="toNextSuffixWordsList($event, i)" maxlength="20" show-word-limit></el-input>
                            </div>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-col>
                
            </el-row>
        </div>
        <div class="pl-36px pt-26px pr-26px text-14px font-bold confirm-keywords">
            确认关键词
        </div>
        <div class="flex pt-20px pl-26px pr-26px">
            <table class="w-full words-table">
                <tr>
                    <th width="10%">序号</th>
                    <th width="20%">关键词</th>
                    <th width="20%">组合方式</th>
                    <th width="10%">序号</th>
                    <th width="20%">关键词</th>
                    <th width="20%">组合方式</th>
                </tr>
                <tr>
                    
                    <td width="10%">1</td>
                    <td width="20%">在线硬度分析仪</td>
                    <td width="20%">前缀/地区语+主词</td>
                    
                </tr>
            </table>

        </div>
        <div class="flex flex-center pt-20px pb-30px">
            <el-button type="primary">确认保存</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Remind from "@/components/Remind/index.vue"

const isShowRemind = ref(true)

const prefixWords = ref(0)
const mainWords = ref(0)
const suffixWords = ref(0)

const formData = reactive({
    prefixWords: [
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
    ],
    mainWords: [
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
    ],
    suffixWords: [
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
        {
            keyword: "",
            placeholder: "请输入关键词",
            canDel: 1
        },
    ],
})

function handleRemindUpdate(){
    isShowRemind.value = !isShowRemind.value
}

function toNextPrefixWordsList(event:any,i:number){
    const e = event || window.event;
    const next = i + 1
    const prev = i - 1
    let l = 0
    let targetId = ''
    if (e.keyCode == 13 || e.keyCode == 40) {//回车/向下
        targetId = 'prefixWordsList' + next
    }
    else if (e.keyCode == 38) {//向上
        targetId = 'prefixWordsList' + prev
    }
    else if (e.keyCode == 9) {//TAB,下一组输入框
        targetId = 'prefixWordsList' + next
    }
    if (targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            targetElement.focus();
        }
    }
    formData.prefixWords.forEach((item) => {
        if (item.keyword.trim() !== '') {
            l++;
        }
    })
    prefixWords.value = l
}

function toNextMainWordsList(event:any,i:number){
    const e = event || window.event;
    const next = i + 1
    const prev = i - 1
    let l = 0
    let targetId = ''
    if (e.keyCode == 13 || e.keyCode == 40) {//回车/向下
        targetId = 'mainWordsList' + next
    }
    else if (e.keyCode == 38) {//向上
        targetId = 'mainWordsList' + prev
    }
    else if (e.keyCode == 9) {//TAB,下一组输入框
        targetId = 'mainWordsList' + next
    }
    if (targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            targetElement.focus();
        }
    }
    formData.mainWords.forEach((item) => {
        if (item.keyword.trim() !== '') {
            l++;
        }
    })
    mainWords.value = l
}

function toNextSuffixWordsList(event:any,i:number){
    const e = event || window.event;
    const next = i + 1
    const prev = i - 1
    let l = 0
    let targetId = ''
    if (e.keyCode == 13 || e.keyCode == 40) {//回车/向下
        targetId = 'suffixWordsList' + next
    }
    else if (e.keyCode == 38) {//向上
        targetId = 'suffixWordsList' + prev
    }
    else if (e.keyCode == 9) {//TAB,下一组输入框
        targetId = 'suffixWordsList' + next
    }
    if (targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            targetElement.focus();
        }
    }
    formData.suffixWords.forEach((item) => {
        if (item.keyword.trim() !== '') {
            l++;
        }
    })
    suffixWords.value = l
}

const toNext = (
    event: KeyboardEvent,
    index: number,
    prefix: string,
    wordList: typeof formData.prefixWords | typeof formData.mainWords | typeof formData.suffixWords,
    counter: Ref<number>
) => {
    const next = index + 1
    const prev = index - 1
    let targetId = ''

    switch (event.key) {
        case 'Enter':
        case 'ArrowDown':
            targetId = `${prefix}${next}`
            break
        case 'ArrowUp':
            targetId = `${prefix}${prev}`
            break
        case 'Tab':
            if (!event.shiftKey) targetId = `${prefix}${next}`
            break
    }

    if (targetId) {
        document.getElementById(targetId)?.focus()
        event.preventDefault()
    }

    // 更新计数器
    counter.value = wordList.filter(item => item.keyword.trim() !== '').length
}

function kwInputChange(){

}

function addMainWords(){

}
</script>

<style lang="scss" scoped>

</style>